/* 
这个主要是为了弄图片懒加载，防止图片过多，或者加载时间很长，出现空白，
思路
指令，就要提到指令钩子函数，bind（el，binding）el传入的指令开始生成的dom，binding里面记载了各种数值
*/
import page from "../assets/default.gif"
import $Bus from "../eventBus";
import { debounce } from "../utils" //函数防抖
let imgs = [] //定义一个数组，用来保存需要处理加载的img
    //当滚动条滚动的时候我们需要监听并且调用加载img函数进行加载img

$Bus.$on("mainScroll", debounce(handleScroll, 50));

function handleScroll() {
    setImges();
}

function setImges() { //images数组处理函数。调用他就能处理该区域img的加载
    // console.log(imgs)
    for (const img of imgs) {
        setImage(img)

    }
};

function setImage(img) { //查看当前传入的img是否要加载展示
    img.dom.src = page;
    //首先我们要确定传入的img要不要加载，
    //加载的条件
    const clientHeight = document.documentElement.clientHeight; //视口的高度
    const recp = img.dom.getBoundingClientRect(); //原素各项数据数组，
    if (recp.top > -recp.height && recp.top <= clientHeight) { //判断原素是否在视口内，是的话就开始加载真正的img，不在视口还是保持在佩奇
        img.dom.src = img.src;
        imgs = imgs.filter(i => i !== img) //筛选掉已经加载的img，剩下没有加载的，避免重复加载，
            // console.log(img.dom)
    }


}

export default {
    inserted(el, binding) {
        const img = { //单是el还不够，这个对象里面把真实的src也需要带过去
            dom: el,
            src: binding.value,
        }
        imgs.push(img)
        setImage(img);

    },
    unbind(el) { //指令与组件解绑时调用，也可以理解为dom原素消失的时候
        imgs = imgs.filter(i => i.dom !== el) //当原素消失，同样代表这个imgs数组里面之前添加的dom就不需要加载了，所以从数组里面把他删除
    }
}